<template>
  <div>
    <!-- 顶部的面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>ECharts演示</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider content-position="left"></el-divider>

    <div class="echarts-tips">
      <p>提示：本页使用假数据演示图表的使用示例，更多图表及用法请参考：https://echarts.apache.org/</p>
    </div>

    <div class="chart new-member">
      <h1>最近新增会员</h1>
      <div id="chart-new-member"></div>
    </div>

    <div class="chart sales">
      <h1>最近销售占比</h1>
      <div id="chart-sales"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      newMember: {
        xData: [],
        yMax: 0,
        data: []
      }
    }
  },
  methods: {
    initNewMemberChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('chart-new-member'));
      // 绘制图表
      myChart.setOption({
        grid: {
          left: '60',
          right: '10',
          top: '30',
          bottom: '30'
        },
        xAxis: {
          type: 'category',
          data: this.newMember.xData
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: this.newMember.yMax
        },
        series: [
          {
            data: this.newMember.data,
            type: 'line',
            smooth: true
          }
        ]
      });
    },
    loadNewMemberData() {
      for (let i = 0; i < 30; i++) {
        this.newMember.xData[i] = i + 1;
        this.newMember.data[i] = Math.floor(Math.random() * (3000 - 500 + 1) + 500);
      }
      this.newMember.yMax = 3000;
      this.initNewMemberChart();
    },
    initSalesChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('chart-sales'));
      // 绘制图表
      myChart.setOption({
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            label: {
              show: true,
              formatter: '{b}，{c}件，{d}%',
            },
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '绿茶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '红茶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '乌龙茶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '普洱茶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '青砖茶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '黑茶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '花茶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '茶壶' },
              { value: Math.floor(Math.random() * (800 - 200 + 1) + 200), name: '茶杯' }
            ]
          }
        ]
      });
    },
    loadSalesData() {
      this.initSalesChart();
    }
  },
  created() {
  },
  mounted() {
    this.loadNewMemberData();
    this.loadSalesData();
  }
}
</script>

<style>
.echarts-tips {
}

.echarts-tips p {
  background: #F56C6C;
  border: none;
  border-radius: 2px;
  margin: 20px 0px;
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
}

.chart {
  margin-bottom: 30px;
}

.chart h1 {
  margin: 0;
  padding: 10px 20px;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  border-radius: 2px;
}

.new-member {

}

.new-member h1 {
  background: #409EFF;
}

#chart-new-member {
  width: 100%;
  height: 300px;
}

.sales {

}

.sales h1 {
  background: #67C23A;
}

#chart-sales {
  width: 100%;
  height: 700px;
}
</style>